﻿import React, {Component} from 'react';
import axios from 'axios'
import {agreeExitPayOrder,noAgreeExitPayOrder} from '../../utils/api'
import {Button, Card, Modal, Space, Table, Form, Input, InputNumber, Row, Col, Select, Empty} from 'antd';
import locale from "antd/lib/date-picker/locale/zh_CN";
const { Option,  } = Select;
const { TextArea } = Input;
const titleStyle={height:'60px',lineHeight:'30px',fontSize:'20px',color: 'rgb(24,144,255)'}
const chakanStyle={height:'250px',textAlign:'right'}

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};


const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

class Tuikuan extends Component {
    constructor(props) {
        console.log(props)
        super(props);
        this.state={
            data:props.data,
            columns:'',
            data2:'',
            columns2:'',
            loading: false,
            visible: false,
            index:'',
            order_rejected_why:'',
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data,
        });
    }
    componentDidMount(){
        // // 普通订单数据
        const data2 = [];
        for (let i = 0; i < 3; i++) {
            data2.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
            });
        }
        const columns2 = [
            {
                title: '订单ID',
                dataIndex: 'key',
            },
            {
                title: '商品名称',
                dataIndex: 'key',
            },
            {
                title: '收货人姓名',
                dataIndex: 'name',
            },
        ];

        this.setState({
            data2:data2,
            columns2:columns2
        })
    }
    addData(val,text) {
        console.log(val)
        console.log(text.target.innerText)
        if (text.target.innerText==='查看同团订单'){
            console.log(123)
            this.props.history.push('/Index/About/About2')
        }
    }

    showModal(val,text){
        console.log(val)
        this.setState({
            visible: true,
            index:val.user_site_name
        });
        // console.log(1)

    };

    handleOk(e,val){
        console.log(e.target)
        if (e.target){
            axios({
                url:agreeExitPayOrder,
                method:'post',
                data:{
                    order_pay_no:val.data[0].order_pay_no,
                    refund_price:val.data[0].order_actual_price,
                    order_id:val.data[0].order_id,
                }
            }).then(data=>{
                console.log(data)
                this.setState({ visible: false });
                this.props.search.bind(this)
            })
        }else {
            this.setState({ visible: false });
        }
    };

    handleCancel(val){
        console.log(val)
        axios({
            url:noAgreeExitPayOrder,
            method:'post',
            data:{
                order_refund_id:val.data[0].order_refund_id,
                order_rejected_why:this.state.order_rejected_why,
            }
        }).then(data=>{
            console.log(data)
            this.setState({ visible: false });
            this.props.search.bind(this)
        })

    };
    dingdanLeiXing=(value)=> {
        console.log(value)
    }

    xuanran=(columns,data)=>{
        if (data!='暂无数据'){
            return <Table bordered rowKey={columns[0].dataIndex} columns={columns} dataSource={data}/>
        }else {
            return <Empty
                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                description='暂无数据'
                locale={locale}/>
        }
    }
    bohui=(val,text)=>{
        console.log(val.target.value)
        this.setState({
            order_rejected_why:val.target.value
        })
    }
    render() {
        const columns = [
            {title: '订单编号', dataIndex: 'order_number',},
            {title: '商品名称', dataIndex: 'goods_name',},
            {title: '收货人姓名', dataIndex: 'consignee',},
            {title: '收货人手机', dataIndex: 'consignee_phone',},
            {title: '寄送类型', dataIndex: 'order_send_type_name',},
            {title: '支付时间', dataIndex: 'order_pay_time',},
            {title: '订单状态', dataIndex: 'order_state_name',},
            {title: '操作', sorter: true,
                render: (text, record) => (  //塞入内容
                    <Space size="middle">
                        <Button onClick={this.showModal.bind(this,text)} type="primary">查看</Button>
                        {/*<Button onClick={this.addData.bind(this,text)}  type="primary" danger>删除</Button>*/}
                    </Space>
                ),

            },
        ];

        const { visible, loading } = this.state;
        const onFinish = values => {
            console.log(values);
        };
        return (
            <>
                <Card headStyle={titleStyle} title="用户退款">
                    {this.xuanran(columns,this.state.data)}
                </Card>

                <Modal
                    visible={visible}
                    title="退款审核"
                    width={900}
                    onCancel={this.handleOk.bind(this,this.state)}
                    {...this.state.data}
                    footer={[
                        <Button key="submit" type="primary" onClick={this.handleOk.bind(this,this.state)}>同意</Button>,
                        <Button key="back" onClick={this.handleCancel.bind(this,this.state)}>驳回</Button>
                    ]}
                >
                    <Row>
                        <Col span={12}>
                            <Card style={chakanStyle}>
                                <Row align="middle" gutter={[8, 8]}>
                                    <Col span={8}>支付方式：</Col>
                                    <Col span={12}>
                                        <Input style={{width:'100%'}} disabled={true} value={this.state.data[0].order_pay_method} />
                            
                                    </Col>
                                </Row>
                            
                                <Row  align="middle" gutter={[8, 8]}>
                                    <Col span={8}>退款金额：</Col>
                                    <Col span={12}>
                                        <Input style={{width:'100%'}} disabled={true} value={this.state.data[0].order_actual_price} />
                                    </Col>
                                </Row>
                                <Row  align="middle" gutter={[8, 8]}>
                                    <Col span={8}>退款原因：</Col>
                                    <Col span={12}>
                                        <TextArea style={{height:'100px'}} disabled={true} placeholder="理由" value={this.state.data[0].order_refund_why}/>
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card style={chakanStyle}>
                                <Row  align="middle" gutter={[8, 8]}>
                                    <Col span={8}>驳回原因：</Col>
                                    <Col span={12}>
                                        <TextArea style={{height:'100px'}} placeholder="理由" onChange={this.bohui}/>
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                    </Row>
                </Modal>
            </>
        );
    }
}

export default Tuikuan;